<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>农产品-新建商品</title>
		<link rel="stylesheet" href="/static/vonder/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/vonder/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/vonder/bootstrap-table/bootstrap-table.min.css">
		<link rel="stylesheet" href="/static/vonder/layui/css/layui.css">

		<link href="/static/vonder/select2/select2.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="/static/css/jquery.tag-editor.css">

		<link rel="stylesheet" href="/static/css/addproduct.css">
		<link rel="stylesheet" href="/static/css/model.css" />
		<script src="/static/vonder/jquery-1.10.2/jquery-1.10.2.min.js"></script>
		<script src="/static/vonder/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src='/static/vonder/layui/layui.all.js'></script>
		<script src="/static/vonder/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="/static/vonder/select2/select2.min.js"></script>
		<script type="text/javascript" src="/static/js/common.js"></script>
		<script src="/static/js/jquery.slimscroll.min.js"></script>
		<script src="/static/js/jquery.tag-editor.min.js"></script>
		<!-- ueditor 编辑器 -->
		<script src="/static/vonder/Ueditor/ueditor.config.js"></script>
		<script src="/static/vonder/Ueditor/ueditor.all.min.js"></script>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<!--左侧开始-->
				<#include "../common/left.html" />
				<!-- 左侧结束 -->
				<!--右侧开始-->
				<div class="contentright">
					<div class="rightbox">
						<!-- 右侧头部导航开始 -->
						<div class="navtopbox">
							<div class="navtop">
								<img src="/static/images/header/user.png" alt="" class="usericon">Admin
							</div>
						</div>
						<!-- 右侧头部导航结束 -->
						<!-- 主体开始 -->
						<div class="structure">
							<div class="mainbox">
								<div class="structext">农副产品</div>
								<div class="audit bg">
									<!-- 新建商品开始 -->
									<div class="product">
										<div class="productleft">
											<div class="classification">
												<div class="ificationtitle">商品分类:</div>
												<div class='selectboxs'>
													<select name="" id="style">
														<option value="1" selected>瓜果</option>
														<option value="2">粮食</option>
													</select>
												</div>
											</div>
											<div class="classification">
												<div class="ificationtitle">商品名称:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">副&nbsp;&nbsp;标&nbsp;&nbsp;题:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品位置:</div>
												<div class='selectboxs'>
													<select name="" id="styles">
														<option value="1" selected>红军餐百姓粮</option>
														<option value="2">一乡一品</option>
														<option value="2">乡村振兴</option>
													</select>
												</div>
											</div>
											<div class="classification">
												<div class="ificationtitle">商品编号:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品品牌:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品售价:</div>
												<input type="number" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">市&nbsp;&nbsp;场&nbsp;&nbsp;价:</div>
												<input type="number" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品库存:</div>
												<input type="number" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">计量单位:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品重量:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品规格:</div>
												<input type="text" placeholder="请输入" class="inputcss">
											</div>
											<div class="classification">
												<div class="ificationtitle">商品参数:</div>
												<textarea name="" id="demo1" cols="30" rows="10" placeholder="请输入商品参数,以空格和逗号分开." style="resize:none"></textarea>
											</div>
											<div class="classification">
												<div class="ificationtitle">商品详情:</div>
												<textarea placeholder="请输入内容..." class="feedtextarea" id="editor" style="width: 1000px;height: 500px;"></textarea>
											</div>
										</div>
										<!-- 右侧开始 -->
										<div class="productright">
											<div class="classification" style="margin-bottom: 50px;">
												<div class="ificationtitle">商品相册:</div>
												<div class="addimgicon">
													<img src="/static/images/structure/addbanner.png" alt="" class="addicon">
													<input type="file" name="" id="uploadfile" multiple="multiple" style="opacity: 0"/>
													<div class="tip">提示：最多可上传6张</div>
												</div>
												<ul id="img-box"></ul>
											</div>
											<div class="classification">
												<div class="ificationtitle">上架状态:</div>
												<div class="switchbox" style="padding-top: 14.5px;">
													<div class="bg_con">
														<input id="checked_1" type="checkbox" class="switch" checked/>
														<label for="checked_1" style="cursor:pointer;"></label>
													</div>
												</div>
											</div>
										</div>
										<!-- 右侧结束 -->
										<div class="addbtnbox">
											<button class="agree">保存</button>
											<button class="noagree">返回</button>
										</div>
									</div>
									<!-- 新建商品结束 -->
								</div>
							</div>
						</div>
						<!-- 主体结束 -->
					</div>
				</div>
				<!-- 右侧结束 -->
			</div>

			<!-- 退出二次确认模态框开始 -->
			<div class="modal fade" id="del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width: 465px;">
					<div class="modal-content" style="width: 465px;">
						<div class="modal-header">
							<img src="/static/images/modal/close.png" alt="" class="close" data-dismiss="modal" aria-hidden="true">
							<h4 class="modal-title" id="myModalLabel">
								提示
							</h4>
						</div>
						<div class="modal-body">
							<div class="prompt">您确定要删除吗？</div>
							<div class="btnboxs" style="padding: 0;text-align: center;">
								<button class="queding" data-dismiss="modal" aria-hidden="true">确定</button>
								<button class="quxiao" data-dismiss="modal" aria-hidden="true">取消</button>
							</div>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!-- 退出二次确认模态框结束 -->

		</div>
	</body>

</html>
<script type="text/javascript">
	// 退出登录
	$(".loginout").click(function() {
		window.location.href = "../login/login.html";
	})
	
	// 下拉框
	var style = $('#style').select2();
	$('#style').select2({
		placeholder: '请选择状态',
		minimumResultsForSearch: -1
	});
	var style = $('#styles').select2();
	$('#styles').select2({
		placeholder: '请选择状态',
		minimumResultsForSearch: -1
	});
	//实例化编辑器
	var ue = UE.getEditor('editor');
	
	// $('#demo1').tagEditor({
	//     initialTags: [],
	//     delimiter: ', ', /* 空格和逗号 */
	//     placeholder: '请输入 ...'
	// });
	
	$('.addicon').click(function(){
	    $('#uploadfile').click();
	})
	
	window.onload=function(){
		var input=document.getElementById("uploadfile");
		// 当用户上传时触发事件
		input.onchange=function(){
			readFile(this);
		}
		//处理图片并添加都dom中的函数
		var readFile=function(obj){
			// 获取input里面的文件组
			var fileList=obj.files;
			//对文件组进行遍历，可以到控制台打印出fileList去看看
			for(var i=0;i<fileList.length;i++){
				var reader= new FileReader();
				reader.readAsDataURL(fileList[i]);
				 // 当文件读取成功时执行的函数
				reader.onload=function(e){
					li=document.createElement('li');
					li.innerHTML='<img src="'+this.result+'" /><img src="/static/images/modal/close.png" class="del">';
					document.getElementById("img-box").appendChild(li);
				}
			}
		}
		
		$(document).on('click','.del',function(){
			$(this).parent('li').remove();
		})
	}
</script>
